<template>
  <div class="qunliao">
    <div class="qunliao-item" @click="to_public_chat(type=1)">
      <img src="../../assets/img/chat/qunliao.svg" alt="" />
      <div class="name">多人在线</div>
    </div>
    <h3>所有用户({{ userLength }})</h3>
    <div class="users">
      <div
        @click="to_private_chat(item,type=0)"
        class="users-item"
        v-for="(item, index) in AllUsers"
      >
        <img @click.stop="to_uindex(item)" :src="item.avatar" alt="" />
        <div class="name">{{ item.nickname }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    AllUsers: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  computed: {
    userLength() {
      return this.AllUsers.length;
    }
  },
  data() {
    return {
      _id: ""
    };
  },
  methods: {
    //跳转到多人聊天
    to_public_chat(type) {
      let uid = '1'
      console.log(type)
      this.$router.push("/conversation/" + uid +'/'+ type);
    },
    //跳转到用户主页
    to_uindex(item) {
      let uid = item._id;
      console.log(uid);
      this.$router.push("/uindex/" + uid);
    },
    //跳转到私聊页面
    to_private_chat(item,type) {
      console.log(type)
      let uid = item._id
      this.$router.push("/conversation/" +uid + '/'+type);
      console.log(item);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.qunliao {
  margin-top: 44px;
  padding: 0 5px 0 5px;
}
.qunliao-item {
  padding: 10px 0 5px 0;
  display: flex;
  border-bottom: 1px solid #999;
}
.qunliao-item img {
  width: 40px;
  height: 40px;
  border: 0.5px solid #999;
  border-radius: 5px;
}
h3 {
  text-align: center;
}
.users img {
  width: 40px;
  height: 40px;
  border-radius: 4px;
}
.users-item {
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 0.5px solid #999;
  display: flex;
}
.name {
  margin-left: 10px;
}
</style>
